import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router'
// 引入getters
import getters from './getters'
// 引入持久化插件
import createPeristedState from 'vuex-persistedstate'
// 子树
import user from './modules/user'
import theme from './modules/theme'
import article from './modules/article'

Vue.use(Vuex)

export default new Vuex.Store({
  plugins:[createPeristedState()],
  getters,
  state: {
    nowPath:"" // 当前路由位置
  },
  mutations: {
    // 设置当前路由位置
    SET_NOW_PATH(state,path){
      state.nowPath = path
    }
  },
  actions: {
    setNowPath({commit},route){
      let routes = router.options.routes
      
      let flag = false // 如果找到则为true
      for(let i=0;i<routes.length;i++){
        let temp = queryName(routes[i])
        if(flag){
          commit("SET_NOW_PATH",temp) 
          break;
        }
      }

      // 查找当前给的这个路由对象是否和现在的路由对象名匹配
      function queryName(routerItem){
        if(routerItem.meta == undefined && routerItem.children == undefined){
          return ""
        }
        if(routerItem.name === route.name){
          flag = true
          return route.meta.title
        }else if(routerItem.meta && routerItem.children){
          let str = ""
          routerItem.children.forEach(item => {
            str += queryName(item)
          })
          return routerItem.meta.title+str
        }
        return ""
      }
    }
  },
  modules: { // 在modules里添加子树
    user,
    theme,
    article
  }
})

/**
 *  state的状态
 *  getters 派生状态 对 页面中多个相同属性进行统一管理封装
 *  mutatuins 修改值
 *  action 动作 提交给 mutations 一般可以做异步处理额大数据量的处理
 *  mudules 模块 添加子树
 * 
 *  Vuex4 3大辅助函数 mapState mapGetters mapMutations mapActions
 *  Vuex流程：
 *  Vuex和缓存的区别：vuex是响应式的，但是刷新后会重置；缓存非响应式，但是刷新后数据会保留
 *  所有要持久化处理
 */